<template>
  <view class="wrap">
    <status-bar></status-bar>
    <image src="../../../static/phoneBg.png" mode="widthFix" class="loginBg"></image>
    <image src="../../../static/left.png" class="left" @click="goBack"></image>
    <view class="center">
      <view class="head">
        <view class="small">
          <image src="../../../static/logo.png" class="img"></image>
        </view>
        <view class="title">注销账户</view>
      </view>
      <view class="box">
        <view class="desc1">注销前请认真阅读以下重要提醒。账号注销后，您将无法再使用该账号，包括但不限于:</view>
        <view class="desc2">1.无法登录、使用账号，并移除该账号下所有登录方式</view>  
        <view class="desc2">2.账号头像重置为默认头像、昵称重置为“用户已注销”</view>  
        <view class="desc2">3.移除该账号下的实名认证信息</view>  
        <view class="desc2">4.该账号下的个人资料和历史信息都将无法找回</view>  
        <view class="desc2">5.取消所有认证身份(如创作者)且无法恢复</view>  
        <view class="desc2">6.账号中所有的资产及权益被清除</view>  
        <view class="desc2">7.无法继续交易、售后等流程</view>  
        
        <view class="protocol">
          <protocol-box :agree='agree' :protocol="[{name: '《注销账号提醒》', id: '9'}]" @click="agree = !agree"></protocol-box>
        </view>
        <button class="btn phone-login" hover-class="none" @click="next">下一步</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import protocolBox from '../../../components/protocol-box/protocol-box.vue';

import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { toast } from '@/common';

let agree = ref(false);
let phone = '';

onLoad((option) => {
  phone = option.phone
})

function goBack(){
  uni.navigateBack({
    delta: 1
  });
}
function next(){
  if(!agree.value) return toast('请勾选协议');
  uni.navigateTo({
    url: '/pages/mine/setting/hintFrom?phone=' + phone
  });
}
</script>

<style lang="scss" scoped>
  .center{
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    .box{
      background-color: #fff;
      border-top-left-radius: 50rpx;
      border-top-right-radius: 50rpx;
      padding: 0 50rpx;
      padding-top: 60rpx;
      position: relative;
      height: 75vh;
      .protocol{
        margin-top: 130rpx;
        margin-bottom: 80rpx;
      }
      .desc2{
        color: #616161;
        font-size: 26rpx;
        font-weight: 400;
        padding-bottom: 10rpx;
      }
      .desc1{
        color: #000000;
        font-size: 28rpx;
        font-weight: 500;
        padding-bottom: 40rpx;
      }
    }
    .head{
      padding: 0 50rpx;
      padding-bottom: 30rpx;
      display: flex;
      align-items: center;
      .title{
        padding-left: 35rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #000000;
      }
      .small{
        width: 50rpx;
        height: 50rpx;
      }
    }
  }
  .left{
    width: 18rpx;
    height: 32rpx;
    margin-top: 30rpx;
    margin-left: 40rpx;
    position: relative;
    z-index: 2;
  }
  .loginBg{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 0;
  }
</style>